<!--
 - @author dawu
 - @name 筛选
 - @description 过滤大学数据筛选，不需任何条件即可查询，主要用在查大学/专业
 - @example <screen :no="[0,2,4]" @screenClick="bindScreen(data)"></screen>
 - @param {Array} no [默认显示所有筛选，可在no中传入不需要显示的下标数组]
 - @return {Function} screenClick [bindScreen组件回调函数，返回data筛选数据]
 -->
<template>
  <div class="screen">
      <div class="list">
        <div class="list-main" v-if="'provinces' in pickerSelect">
          <div
            v-for="(item,key,index) in pickerSelect" :key="key"
            class="list-group" :class="(active == key) && 'active'"
            v-if="inArray(index)"
            @mouseenter="hover(key)"
            @mouseleave="hover()">
              <div class="title" v-if="item">{{item.title}}</div>
              <i class="icon icon-to_bottom"></i>
              <div
                v-if="item"
                class="name"
                @click="item.select && clickItem()"
                :class="item.select.length>0 && 'name_active'">
                  {{item.select.length>0?item.select[0]+(item.select.length>1?'...':''):item.name}}
              </div>
          </div>
        </div>

        <!-- <div class="check_box" v-if="inArray(4)">
          <div class="check_title"> 录取概率 </div>
          <div class="check_list">
            <el-checkbox-group v-if="pickerAll.chongShouBao" v-model="checkList" @change="bindCheckbox">
              <el-checkbox :label="item.id" v-for="(item,key) in pickerAll.chongShouBao" :key="key">
                {{item.name}}
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </div> -->
      </div>
      <div
        class="list-box"
          v-show="isProperty"
          @mouseenter="isProperty = !0"
          @mouseleave="isProperty = !1">
            <div
              class="list-item"
              v-for="(item,index) in pickerAll[active]" :key="index">
              <span class="active"
                v-if="pickerSelect[active]['id'].indexOf(item.id)>=0"
                @click="clickItemClose(item)">{{item.name}}</span>
              <span @click="clickItem(item)" v-else>{{item.name}}</span>
            </div>
      </div>
  </div>
</template>

<script>
import { api } from '@/utils'
export default {
  data () {
    return {
      isProperty: false, // 属性展示
      checkList: [],
      pickerSelect: {}, // 筛选数据
      pickerAll: [], // 全部数据
      active: '', // 选中数据下标
      params: {},
      pageType: 'volunteer'
    }
  },
  props: {
    show: {
      type: [Boolean, String],
      default () {
        return true
      }
    },
    no: {
      type: Array,
      default () {
        return []
      }
    }
  },
  methods: {
    // 数组中是否存在值
    inArray (index) {
      let r = new RegExp(',' + index + ',')
      return !(r.test(',' + this.no.join() + ','))
    },
    hover (key) {
      if (key) {
        this.active = key
        this.isProperty = !0
      } else {
        this.isProperty = !1
      }
    },
    // 选择单个选项
    clickItem (data = '') {
      let _data = this.pickerSelect[this.active]
      data ? _data.id.push(data.id) : (_data.id = [])
      data ? _data.select.push(data.name) : (_data.select = [])
      this.$set(this.pickerSelect, _data.subtype, _data)
      this.getSchoolData()
    },
    // 取消单个选项
    clickItemClose (data) {
      let _data = this.pickerSelect[this.active]
      _data.id.splice(_data.id.indexOf(data.id), 1)
      _data.select.splice(_data.select.indexOf(data.name), 1)
      this.$set(this.pickerSelect, _data.subtype, _data)
      this.getSchoolData()
    },
    // 录取概率多选
    // bindCheckbox () {
    //   let _data = this.pickerSelect.chongShouBao
    //   _data.id = this.checkList
    //   this.$set(this.pickerSelect, 'chongShouBao', _data)
    //   this.getSchoolData()
    // },
    getSchoolData () {
      let _a = this.pickerSelect
      for (let type in _a) {
        let _b = _a[type]
        this.params[_b.type] = _b.id ? _b.id.join(',') : ''
      }
      // this.params.page = 0
      // this.params.size = 15
      this.$emit('screenClick', this.params)
    },
    getPickerData () {
      // this.$axios.get(api.queryCollegeCondition).then(data => {
      this.$axios.get(api.zhiyuanQueryCollegeCondition).then(data => {
        if (data) {
          for (let x in data) {
            if (data[x].length > 0) {
              let _data, _dataAll
              switch (x) {
                case 'provinces':
                  _data = {
                    id: [], name: '全国', type: 'provinceIdList', subtype: 'provinces', title: '地域', select: []
                  }
                  _dataAll = data[x].slice(1)
                  break
                case 'collegeLevels':
                  _data = {
                    id: [], name: '不限', type: 'collegeLevelIdList', subtype: 'collegeLevels', title: '学院性质', select: []
                  }
                  _dataAll = data[x].slice(1)
                  break
                case 'collegeTypes':
                  _data = {
                    id: [], name: '不限', type: 'collegeTypeIdList', subtype: 'collegeTypes', title: '学院类型', select: []
                  }
                  _dataAll = data[x].slice(1)
                  break
                case 'subjects':
                  _data = {
                    id: [], name: '不限', type: 'subjects', subtype: 'subjects', title: '学科', select: []
                  }
                  _dataAll = data[x].slice(2)
                  break
              }
              this.$set(this.pickerSelect, x, _data)
              this.$set(this.pickerAll, x, _dataAll)
            }
          }
        }
      }).catch(err => {
        console.log(err)
        // this.text = '网络走丢了，请稍后重试！'
      })
    }
  },
  created () {
    this.getPickerData()
  }
}
</script>

<style scoped lang="scss">
.el-checkbox+.el-checkbox{margin-left:10px}
.screen{
  position:relative;
  background:$light;
  .list{
    position:relative; z-index:1;
    background:$light;
    display:flex;
    align-items:center;
    border:1px solid $line;
    font-size:14px;
    flex-wrap:wrap;
    &:after{
      position:absolute;
      top:36px; left:0px;
      content:""; display:block;
      height:1px; width:100%;
      background:$line;
    }
    .list-main{
      display:flex;
      align-items:center;
      margin-right:30px;
      border-right:1px solid $line;
    }
    .list-group{
      height:36px;
      cursor:pointer;
      margin-right:10px;
      display:flex;
      align-items:center;
      padding:0 10px;
      &:hover{
        background:#F7F7FB;
      }
      &.active{
        background:#F7F7FB;
      }
      i{
        font-size:10px;
        margin:0 5px;
      }
      .name{
        position:relative;
        border:1px solid transparent;
        color:#adadad;
        &_active{
          border:1px solid $line;
          padding:0 4px;
          padding-right:20px;
          &:hover{
            border:1px solid $table-r;
            color:$table-r;
          }
          &:after{
            position:absolute; right:5px; top:0px;
            display:block;
            content:"×";
          }
        }
      }
    }
    // .check_box{
    //   display:flex;
    //   height:36px;
    //   align-items:center;
    //   .check_title{
    //     height:100%;
    //     display:flex;
    //     align-items:center;
    //     padding:0 20px 0 10px;
    //   }
    //   /deep/ .el-checkbox__label{
    //     padding-right:10px;
    //   }
    // }
  }
  .list-box{
    position:absolute; left:0; top:35px; z-index:2;
    background:$light;
    width:100%;
    padding:15px 0 0 10px;
    border:1px solid $line;
    box-shadow: 0px 2px 5px rgba(0,0,0,.2);
    display:flex;
    flex-wrap:wrap;
    .list-item{
      margin:0 20px 15px 0;
      cursor:pointer;
      >span{
        position:relative;
        border:1px solid $light;
        padding:2px;
        padding-right:20px;
        &:hover{
          color:$table-b;
        }
        &.active{
          color:$stable-ad;
          border:1px solid $line;
          &:after{
            position:absolute; right:5px; top:2px;
            display:block;
            content:"×";
          }
          &:hover{
            border:1px solid $table-r;
            color:$table-r;
          }
        }
      }
    }
  }
}
.tab {
  position: relative;
  margin: 10px 0 25px 25px;
  display: flex;
  span {
    &:not(:last-child) {
      margin-right: 20px;
    }
    color: $stable02;
    font-size: 18px;
    transition: all ease 0.35s;
    cursor: pointer;
    &.active {
      color: #000;
    }
  }
  .triped {
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 32px;
    height: 6px;
    background-color: $energized;
    transition: all ease 0.35s;
  }
}
</style>
